<template>
  <v-navigation-drawer app width="180" class="sidebar">
    <v-list dense>
      <v-list-item
        v-for="(item, index) in menuItems"
        :key="index"
        :to="item.path"
        link
        class="sidebar-item"
      >
        <v-list-item-title>{{ item.title }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  name: 'SidebarNav',
  data() {
    return {
      menuItems: [
        { title: '首页', path: '/' },
        // { title: '城市路线规划', path: '/cityRoutePlanner' },
        // { title: '城市路线规划 2', path: '/cityRoutePlanner2' },
        { title: '相似度比较', path: '/sketch' },
        { title: '中观相似度比较', path: '/sketch2' },
        { title: '自定义匹配--windows运行', path: '/Customize' }

      ]
    }
  }
}
</script>

<style scoped>
.sidebar {
  background-color: #f5f5f5;
}

.sidebar-item {
  padding: 8px 16px;
  margin: 4px 0;
  border-radius: 4px;
}

.sidebar-item:hover {
  background-color: #e0e0e0;
}

.v-list-item--active {
  background-color: #e3f2fd;
  color: #1976d2;
}
</style>